<template>
  <el-container>
    <div
      style="background-color: #fff; margin: 10px 0 ;box-shadow: 10px 10px 18px 0 rgba(0,0,0,.12);border-radius:3px;">
      <el-row style="margin: 1% auto;font-size:20px;text-align: center;">账号查询</el-row>
      <el-form :model="formData" ref="formData" :inline="true" style="text-align: center;" width="80%">
        <el-row>
          <el-form-item label="登录账号" prop="loginName">
            <el-input v-model="formData.loginName" placeholder="登录账号"></el-input>
          </el-form-item>
          <el-form-item label="用户名称" prop="username">
            <el-input v-model="formData.username" placeholder="用户名称"></el-input>
          </el-form-item>
          <el-form-item label="账号状态" prop="state">
            <el-select v-model="formData.state" placeholder="请选择账号状态">
              <el-option label="可用" value="1"></el-option>
              <el-option label="禁用" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="角色类型" prop="roleName">
            <el-select v-model="formData.roleName" placeholder="请选择角色类型">
              <el-option v-for="item in formData.role" :key="item.id" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('formData')">搜索</el-button>
            <el-button @click="resetForm('formData')">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <!-- </el-header> -->
    </div>
    <el-card style="margin-top:0.5%">
      <span style="padding-left:1%">
        <el-button type="primary" size="small" @click="addUserBtn">新增</el-button>
      </span>

      <el-table v-loading="tableLoding" :data="tableData.data" style="width: 100%">
        <el-table-column prop="loginName" label="登录账号" align="center"></el-table-column>
        <el-table-column prop="username" label="用户名称" align="center"></el-table-column>
        <el-table-column prop="state" label="账号状态" :formatter="stateChangeData" align="center"></el-table-column>
        <el-table-column prop="tel" label="电话号码" align="center"></el-table-column>
        <el-table-column prop="addressName" label="地区" align="center"></el-table-column>
        <el-table-column prop="roleName" label="角色类型" align="center"></el-table-column>
        <el-table-column prop="adminPermission" label="拥有管理员权限" :formatter="permissionChangeData" align="center"
          width="150px"></el-table-column>
        <el-table-column prop="createTime" label="账号创建时间" align="center"></el-table-column>
        <el-table-column prop="updateTime" label="账号最后修改时间" align="center"></el-table-column>
        <el-table-column prop="operation" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary">编辑</el-button>
            <el-button slot="reference" size="mini" @click="confirmDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
          @next-click="nextPage" :current-page="tableData.currentPage" :page-sizes="[5, 10, 15, 20,25,30,35,40]"
          :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
        </el-pagination>
      </div>

      <el-dialog title="用户新增（修改）" :visible.sync="userState" center :append-to-body="true" :lock-scroll="false"
        width="40%" @close="clearDetailUser">
        <el-form :model="userDetail" ref="userDetail" style="text-align:center;font-size:20px;" label-width="170px"
          :rules="userRules">
          <el-form-item label="登录账号" prop="loginName">
            <el-input v-model="userDetail.loginName"></el-input>
          </el-form-item>
          <el-form-item label="登陆密码" prop="loginPassword">
            <el-input v-model="userDetail.loginPassword" placeholder="新密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="用户名称" prop="username">
            <el-input v-model="userDetail.username"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="userDetail.tel"></el-input>
          </el-form-item>
          <el-form-item label="角色类型" prop="rid">
            <el-select v-model="userDetail.rid" placeholder="请选择" style="width:100%">
              <el-option v-for="item in userDetail.role" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地区范围" prop="currentCode">
            <el-select v-model="userDetail.currentCode" placeholder="请选择" style="width:100%">
              <el-option v-for="item in userDetail.address" :key="item.code" :label="item.name" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账号状态" prop="state">
            <el-select v-model="userDetail.state" placeholder="请选择" style="width:100%">
              <el-option label="可用" value="1"></el-option>
              <el-option label="禁用" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否拥有审核权限" prop="adminPermission">
            <el-select v-model="userDetail.adminPermission" placeholder="请选择" style="width:100%">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-button @click="putUserSave('userDetail')" type="primary">保存</el-button>
          <el-button @click="putUserCancel">取消</el-button>
        </el-form>
      </el-dialog>
    </el-card>

    <el-footer></el-footer>

    <el-dialog title="用户新增（修改）" :visible.sync="userState" center :append-to-body="true" :lock-scroll="false" width="36%"
      @close="clearDetailUser">
      <el-form :model="userDetail" ref="userDetail" style="text-align:center;font-size:20px;" label-width="160px"
        :rules="userRules">
        <el-form-item label="登录账号" prop="loginName">
          <el-input v-model="userDetail.loginName"></el-input>
        </el-form-item>
        <el-form-item label="登陆密码" prop="loginPassword">
          <el-input v-model="userDetail.loginPassword" placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="userDetail.username"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="userDetail.tel"></el-input>
        </el-form-item>
        <el-form-item label="角色类型" prop="rid">
          <el-select v-model="userDetail.rid" placeholder="请选择" style="width:100%">
            <el-option v-for="item in userDetail.role" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区范围" prop="currentCode">
          <el-select v-model="userDetail.currentCode" placeholder="请选择" style="width:100%">
            <el-option v-for="item in userDetail.address" :key="item.code" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号状态" prop="state">
          <el-select v-model="userDetail.state" placeholder="请选择" style="width:100%">
            <el-option label="可用" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否拥有审核权限" prop="adminPermission">
          <el-select v-model="userDetail.adminPermission" placeholder="请选择" style="width:100%">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-button @click="putUserSave('userDetail')" type="primary">保存</el-button>
        <el-button @click="putUserCancel">取消</el-button>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
  import {
    getUserData,
    getUserByCondition,
    addUserInfo,
    removeUser,
  } from "@/api/userApi";
  import {
    getAddressList
  } from "@/api/addressDictionary";
  import {
    getRoleList
  } from "@/api/roleApi";
  import store from "@/vuex/store";
  export default {
    data() {
      return {
        addressCode: store.getters.addressCode,
        userState: false,
        formData: {
          roleName: "",
          loginName: "",
          username: "",
          state: "",
          role: [{
            id: "",
            name: ""
          }],
          currentPage: 1,
          pageSize: 5,
          total: 0,
        },

        tableData: {
          //表格data
          data: [{
            uid: "",
            loginName: "",
            password: "",
            username: "",
            tel: "",
            addressName: "",
            roleName: "",
            adminPermission: "",
            state: "",
          }, ],
          currentPage: 1,
          pageSize: 5,
          total: 0,
        },
        tableLoding: false, //表格加载
        userDetail: {
          uid: "",
          loginName: "",
          loginPassword: "",
          username: "",
          tel: "",
          adminPermission: "",
          address: [{
            name: "",
            pcode: "",
            code: ""
          }],
          role: [{
            id: "",
            name: ""
          }],
          rid: "",
          addressCode: store.getters.addressCode,
          currentCode: "",
          state: "",
        },
        userRules: {
          loginName: [{
              required: true,
              message: "请输入登录账号",
              trigger: "blur"
            },
            {
              min: 1,
              message: "最少输入1个字符",
              trigger: "blur"
            },
          ],
          loginPassword: [{
            required: true,
            message: "请输入登录密码",
            trigger: "blur"
          }, ],
          username: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }, ],
          tel: [{
            required: true,
            message: "请输入电话",
            trigger: "blur"
          }],
          state: [{
            required: true,
            message: "请选择状态",
            trigger: "change"
          }],
          rid: [{
            required: true,
            message: "请选择角色",
            trigger: "change"
          }],
          currentCode: [{
            required: true,
            message: "请选择地区",
            trigger: "change"
          }, ],
          adminPermission: [{
            required: true,
            message: "请选择权限",
            trigger: "change"
          }, ],
        },
        address: [],
        role: [],
      };
    },
    created: function () {
      getAddressList(this.addressCode).then((addressList) => {
        this.address = addressList.data.data;
      });
      getRoleList().then((response) => {
        this.role = response.data.data;
      });
    },
    methods: {
      clearDetailUser() {
        this.userDetail = {
          uid: "",
          loginName: "",
          loginPassword: "",
          username: "",
          adminPermission: "",
          tel: "",
          address: [{
            name: "",
            pcode: "",
            code: ""
          }],
          role: [{
            id: "",
            name: ""
          }],
          rid: "",
          addressCode: "",
          currentCode: "",
          state: "",
        };
      },
      // 数据控制
      getUserData() {
        this.tableLoding = true;
        getUserData(this.tableData)
          .then((response) => {
            this.tableData.data = response.data.data.items;
            this.tableData.total = response.data.data.total;
          })
          .catch((error) => {
            this.$message({
              showClose: true,
              message: error,
              type: "error",
            });
          });
        this.tableLoding = false;
      },
      changePageSize(val) {
        this.tableData.pageSize = val;
        this.getUserData();
      },
      changeCurrentPage(val) {
        this.tableData.currentPage = val;
        this.getUserData();
      },
      prevPage(val) {
        this.tableData.currentPage = val;
        this.getUserData();
      },
      nextPage(val) {
        this.tableData.currentPage = val;
        this.getUserData();
      },
      stateChangeData: function (row) {
        return row.state == "1" ?
          "可用" :
          row.state == "2" ?
          "禁用" :
          row.state == "3" ?
          "账号已经删除" :
          row.state == "4" ?
          "冻结中" :
          "未知";
      },
      permissionChangeData: function (row) {
        return row.adminPermission == "1" ?
          "是" :
          row.adminPermission == "2" ?
          "否" :
          "未知";
      },
      putUserSave(userDetail) {
        // console.log(userDetail);
        this.$refs[userDetail].validate((valid) => {
          if (valid) {
            addUserInfo(this.userDetail)
              .then((response) => {
                this.$message.success(response.data.respondMessage);
                this.getUserData();
              })
              .catch((error) => {
                this.$message.error(error.data.respondMessage);
                this.getUserData();
              });
          } else {
            this.$message.error("数据录入出错");
            return false;
          }
          this.userState = false;
        });
      },
      putUserCancel() {
        this.userState = false;
      },
      handleEdit(index, row) {
        this.userDetail.address = this.address;
        this.userDetail.role = this.role;
        this.userDetail.uid = row.uid;
        this.userDetail.tel = row.tel;
        this.userDetail.loginName = row.loginName;
        this.userDetail.username = row.username;
        this.userDetail.state = row.state;
        this.userDetail.adminPermission = row.adminPermission;
        this.userDetail.rid = row.rid;
        this.userDetail.currentCode = row.currentCode;
        this.userState = true;
      },
      submitForm(userInfo) {
        this.$refs[userInfo].validate((valid) => {
          if (valid) {
            getUserByCondition(this.formData)
              .then((response) => {
                this.tableData.data = response.data.data.items;
                this.tableData.total = response.data.data.total;
                this.tableLoding = false;

                this.$message({
                  showClose: true,
                  message: "搜索成功",
                  type: "success",
                });
              })
              .catch((error) => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error",
                });
              });
          } else {
            return false;
          }
        });
      }, // 清空表单选项
      resetForm(userInfo) {
        this.$refs[userInfo].resetFields();
        this.getUserData();
      },
      addUserBtn() {
        this.userDetail.addressCode = this.addressCode;
        this.userDetail.address = this.address;
        this.userDetail.role = this.role;
        this.userState = true;
      },
      //确定删除
      confirmDelete(index, row) {
        this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            console.log(row);
            removeUser(row).then((response) => {
              // console.log(response);
              this.$message.info(response.data.respondMessage);
              this.getUserData();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
    },
    mounted() {
      this.getUserData();
      getRoleList().then((response) => {
        this.formData.role = response.data.data;
      });
    },
  };
</script>

<style>
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #70b3ff87 !important;
  }
</style>